<!-- /pages/control.html -->

<div class="card">
    <h2><span class="menu__icon">🔌</span> 电源控制</h2>
    <div class="control-item">
        <p>控制主继电器的开启或关闭。</p>
        <!-- 使用我们之前在服务配置页定义的开关样式 -->
        <div class="service-toggle">
            <label id="relay-status-text" for="relay-toggle">当前状态: 未知</label>
            <label class="switch">
                <input type="checkbox" id="relay-toggle" name="relay_state">
                <span class="slider round"></span>
            </label>
        </div>
    </div>
</div>

<div class="card">
    <!-- 模式切换: 控制 vs 学习 -->
    <div class="ir-mode-selector">
        <input type="radio" id="ir-mode-control" name="ir_mode" value="control" checked>
        <label for="ir-mode-control">空调控制</label>
        
        <input type="radio" id="ir-mode-learn" name="ir_mode" value="learn">
        <label for="ir-mode-learn">空调学习模式</label>
    </div>

    <!-- 控制面板 (默认显示) -->
    <div id="ir-control-panel" class="ir-panel active">
        <!-- 主要功能按钮 -->
        <div class="ir-grid ir-main-commands">
            <button class="btn" data-command="power" data-value="on">开启</button>
            <button class="btn" data-command="power" data-value="off">关闭</button>
            <button class="btn" data-command="mode" data-value="cool">制冷</button>
            <button class="btn" data-command="mode" data-value="heat">制热</button>
            <button class="btn" data-command="mode" data-value="auto">自动</button>
        </div>
        
        <!-- 制冷温度区 -->
        <h3 class="ir-section-title">制冷</h3>
        <div id="ir-cool-temps" class="ir-grid ir-temp-grid">
            <!-- JS 会在这里填充按钮 -->
        </div>
        
        <!-- 制热温度区 -->
        <h3 class="ir-section-title">制热</h3>
        <div id="ir-heat-temps" class="ir-grid ir-temp-grid">
            <!-- JS 会在这里填充按钮 -->
        </div>
    </div>

    <!-- 学习面板 (默认隐藏) -->
    <div id="ir-learn-panel" class="ir-panel">
        <p id="ir-learn-instructions" class="info-text">请在下方选择一个您想要学习的按键功能。</p>
        
        <!-- 这里是学习用的按钮，结构和控制面板类似 -->
        <h3 class="ir-section-title">学习主要功能</h3>
        <div class="ir-grid ir-main-commands">
            <button class="btn btn-learn" data-command="power" data-value="on">学习“开启”</button>
            <button class="btn btn-learn" data-command="power" data-value="off">学习“关闭”</button>
            <button class="btn btn-learn" data-command="mode" data-value="cool">学习“制冷”</button>
            <button class="btn btn-learn" data-command="mode" data-value="heat">学习“制热”</button>
            <button class="btn btn-learn" data-command="mode" data-value="auto">学习“自动”</button>
        </div>

        <h3 class="ir-section-title">学习制冷温度 (16-30°C)</h3>
        <div id="ir-learn-cool-temps" class="ir-grid ir-temp-grid">
             <!-- JS 会在这里填充学习按钮 -->
        </div>

        <h3 class="ir-section-title">学习制热温度 (16-30°C)</h3>
        <div id="ir-learn-heat-temps" class="ir-grid ir-temp-grid">
             <!-- JS 会在这里填充学习按钮 -->
        </div>
    </div>
</div>
